<template>
  <span class="uds-outter">
    <i
      class="sort-caret ascending"
      :class="sortType ==='up' ? 'sortbActive' : ''"
      @click="upsort"
    ></i>
    <i
      class="sort-caret descending"
      :class="sortType ==='down' ? 'sorTctive' : ''"
      @click="downsort"
    ></i>
  </span>
</template>

<script>
export default {
  name: "upDownSort",
  data() {
    return {
      sortType: "",
    };
  },
  methods: {
    upsort() {
      this.sortType = "up";
      this.$emit("click", "up");
    },
    downsort() {
      this.sortType = "down";
      this.$emit("click", "down");
    },
  },
};
</script>

<style lang="less" scoped>
.uds-outter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 34px;
  width: 15px;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;
  .sort-caret {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    position: absolute;
    left: 7px;
  }
  .ascending {
    border-bottom-color: #c0c4cc;
    top: 5px;
  }
  .sortbActive {
    border-bottom-color: #409eff;
  }
  .descending {
    border-top-color: #c0c4cc;
    bottom: 7px;
  }
  .sorTctive {
    border-top-color: #409eff;
  }
}
</style>